<template>
	<div class="drop-down">
		<div class="drop-down-title">
			<slot name="title" />
		</div>
		<CollapseTransition v-model="openAnimation">
			<div v-show="hasContent && isExpand" class="drop-down-body">
				<slot />
			</div>
		</CollapseTransition>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

import CollapseTransition from "../collapse-transition/index";

@Component({
  name: "DropDown",
	components: {
		CollapseTransition,
	},
})
export default class DropDown extends Vue {

  @Prop({ type: Boolean }) public isExpand!: boolean;
  @Prop({ type: Boolean }) public hasContent!: boolean;
  @Prop({ type: Boolean, default: true }) public openAnimation!: boolean;

}
</script>

<style lang="scss" scoped>
.drop-down-body {
	transition-duration: .2s;
}
</style>
